<template>
  <Nav>
    <div class="container">
      <div class="chers">
        <input class="input" v-model="searchvalue" type="text" />
        <el-button class="button" type="primary" icon="el-icon-search">搜索</el-button>
      </div>
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="寺庙简介" name="first">
          <div class="jianjieContent">
            <div class="jianjieTitle">佛寺简介</div>
            <div class="jianjieText">{{temple.name }}</div>
            <div class="jianjieImages">
              <img
                class="jianjieImages_item"
                v-for="(item, index) of temple.templeimg"
                :key="index"
                :src="item"
              />
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="组织架构" name="second">组织架构</el-tab-pane>

        <el-tab-pane label="僧尼信息" name="third">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              person.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column prop="image" label="图片" min-width="20%">
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="gender" label="性别" width="180"></el-table-column>
            <el-table-column prop="nation" label="名族"></el-table-column>
            <el-table-column prop="monkInfo.shrine" label="所属寺庙"></el-table-column>
            <el-table-column prop="monkInfo.templePosition" label="寺内职务"></el-table-column>
            <el-table-column prop="address" label="住址"></el-table-column>
            <el-table-column prop="number" label="身份证号"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="renyuanhandleClick(scope.$index, scope.row)"
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="person.length"
            ></el-pagination>
          </div>
        </el-tab-pane>

        <el-tab-pane label="房屋信息" name="fourth">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              house.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column prop="image" label="图片" min-width="20%">
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column prop="identifier" label="轧空编号" width="180"></el-table-column>
            <el-table-column prop="residentnum" label="居住人数" width="180"></el-table-column>
            <el-table-column prop="temple" label="所属寺庙" width="180"></el-table-column>
            <el-table-column prop="resident" label="居住人员姓名" width="180"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="fangwuhandleClick(scope.$index, scope.row)"
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="house.length"
            ></el-pagination>
          </div>
        </el-tab-pane>

        <el-tab-pane label="经济实体" name="fifth">
          <Category />
          <div class="contentlist">
            <div
              class="contentlist_item"
              v-for="(item, index) of shitiList.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )"
              :key="index"
              @click="changeRouterDetails(index)"
            >
              <img class="item_image" :src="item.src" :alt="item.title" />
              <p class="item_title">{{ item.title }}</p>
            </div>
          </div>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="shitiList.length"
            ></el-pagination>
          </div>
        </el-tab-pane>

        <el-tab-pane label="寺庙全景" name="sixth">寺庙全景</el-tab-pane>

        <el-tab-pane label="寺庙车辆" name="seventh">
          <Category />
          <el-table
            :style="appbg"
            :header-cell-style="{
              background: 'rgba(0,0,0,0.70)',
              color: '#999ba4',
            }"
            class="table"
            :data="
              person.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            :row-style="tableRowClassName"
          >
            <el-table-column prop="image" label="图片" min-width="20%">
              <!-- 图片的显示 -->
              <template slot-scope="scope">
                <img class="img" :src="scope.row.image" />
              </template>
            </el-table-column>
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="chelianghandleClick(scope.$index, scope.row)"
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="person.length"
            ></el-pagination>
          </div>
        </el-tab-pane>

        <el-tab-pane label="佛寺活动" name="eighth">
          <Category />
        </el-tab-pane>
      </el-tabs>
    </div>
  </Nav>
</template>

<script>
import bg from "@/images/bg.png";
import Nav from "@/components/Nav/index";
import Category from "@/components/Category/index";
import image from "@/images/bg.png";
import { getTemple, listPerson, listHouse, listBusiness } from "@/api/data";

export default {
  data() {
    return {
      id: "",
      temple: [],
      person: {},
      house: {},
      business: {},
      params: {
        page: 1,
        perPage: 20
      },
      searchvalue: "",
      appbg: `background:url('${bg}') no-repeat`,
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 8, // 每页的数据条数
      activeName: "first",
      shitiList: [
        {
          id: "1",
          title: "某某物流",
          src: image
        },
        {
          id: "2",
          title: "某某银行",
          src: image
        },
        {
          id: "3",
          title: "某某网吧",
          src: image
        }
      ]
    };
  },
  methods: {
    async GetTemple() {
      const temple = await getTemple(this.id);
      this.temple = temple;
      // console.log("this.temples", this.temple);
    },
    async ListPerson() {
      this.params.classify = "僧人";
      const person = await listPerson(this.params);
      this.person = person.list;
      // console.log("this.person", this.person);
    },
    async ListHouse() {
      const house = await listHouse(this.params);
      this.house = house.list;
      // console.log("this.house", this.house);
    },
    async ListBusiness() {
      const business = await listBusiness(this.params);
      this.business = business.list;
      // console.log("this.house", this.house);
    },
    chelianghandleClick(index) {
      this.$router.push({
        name: "cardetails",
        query: {
          id: this.person[index].id
        }
      });
    },

    fangwuhandleClick(index) {
      this.$router.push({
        name: "housedetails",
        query: {
          id: this.person[index].id
        }
      });
    },

    renyuanhandleClick(index) {
      this.$router.push({
        name: "peopledetails",
        query: {
          id: this.person[index].id
        }
      });
    },

    // 分页取id
    changeRouterDetails(index) {
      this.index = index;
      if (this.currentPage > 1) {
        const ids = (this.currentPage - 1) * this.pageSize + index;
        this.index = ids;
      }
      // console.log(this.index);

      // 传过去的id,这里要改一下路由
      // console.log(this.list[this.index].id);
      //   this.$router.push({
      //     name: "templedetails",
      //     params: {
      //       id: this.list[this.index].id,
      //     },
      //   });
    },
    tableRowClassName() {
      // 注意，这里返回的是一个对象
      let rowBackground = {};
      rowBackground.background = "rgba(0,0,0,0)";
      return rowBackground;
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    }
  },
  mounted() {
    const id = this.$route.params.id;
    this.id = id;
    // console.log(id);
    this.GetTemple();
    this.ListPerson();
    this.ListHouse();
    // this.ListPerson();
  },
  components: {
    Nav,
    Category
  }
};
</script>

<style scoped>
.tabs {
  width: 8.916667rem /* 1712/192 */;
  color: #999ba4;
}

.table {
  font-size: 0.072917rem /* 14/192 */;
  width: 8.59375rem /* 1650/192 */;
  color: #999ba4;
  margin: 0.104167rem /* 20/192 */ auto 0;
}

.img {
  border-radius: 50%;
  width: 0.182292rem /* 35/192 */;
  height: 0.182292rem /* 35/192 */;
}

.chers {
  padding-top: 0.15625rem /* 30/192 */;
}

.input {
  width: 2.609375rem /* 501/192 */;
  height: 0.234375rem /* 45/192 */;
}

.jianjieContent {
  width: 8.59375rem /* 1650/192 */;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.15625rem /* 30/192 */ 0 0.385417rem /* 74/192 */;
  font-size: 0.072917rem /* 14/192 */;
  font-family: "Microsoft YaHei", "Microsoft YaHei-Normal";
  color: #333333;
}

.jianjieTitle {
  font-size: 0.125rem /* 24/192 */;
  color: #066ac6;
  margin-bottom: 0.15625rem /* 30/192 */;
}

.jianjieText {
  width: 7.994792rem /* 1535/192 */;
  margin: 0 auto;
  color: #999ba4;
  line-height: 0.15625rem /* 30/192 */;
  font-size: 0.072917rem /* 14/192 */;
  height: 1.864583rem /* 358/192 */;
}

.jianjieImages {
  width: 7.994792rem /* 1535/192 */;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
}
.jianjieImages_item {
  width: 1.822917rem /* 350/192 */;
  height: 1.145833rem /* 220/192 */;
  border-radius: 0.026042rem /* 5/192 */;
}

.contentlist {
  width: 8.59375rem /* 1650/192 */;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0.104167rem /* 20/192 */ auto 0;
  flex-wrap: wrap;
}

.contentlist_item {
  width: 2.083333rem /* 400/192 */;
  height: 1.5625rem /* 300/192 */;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  margin-bottom: 0.104167rem /* 20/192 */;
}

.item_image {
  width: 1.822917rem /* 350/192 */;
  height: 1.145833rem /* 220/192 */;
  margin: 0.119792rem /* 23/192 */ 0 0.083333rem /* 16/192 */;
}

.item_title {
  font-size: 0.09375rem /* 18/192 */;
  font-family: "Microsoft YaHei", "Microsoft YaHei-Normal";
  font-weight: Normal;
  text-align: center;
  height: 0.135417rem /* 26/192 */;
  line-height: 0.03125rem /* 6/192 */;
  color: #999ba4;
}
</style>